<template>
    <NuxtLayout :name="false">
        <section class="login-wrapper">
            <div class="login-bg"></div>
            <div class="login-form">
                <div class="login-hd">
                    <a class="logo-wrap"
                        href="/">
                        波维希
                        <img src="https://oss.boweixi.com/prod/bwx/logo.png"
                            alt="logo" />
                    </a>
                    <div>
                        <p class="tlt">欢迎使用波维希</p>
                        <p class="desc">达人选号投放，自动化种草营销管理工具</p>
                    </div>
                </div>

                <el-form :model="dm"
                    label-position="top"
                    size="large">
                    <el-form-item label="手机号：">
                        <el-input v-model="dm.account"
                            placeholder="请输入手机号"
                            class="w-275px" />
                    </el-form-item>
                    <el-form-item label="验证码：">
                        <div class="f-b">
                            <el-input v-model="dm.verificationCode"
                                placeholder="请输入验证码"
                                class="w-150px" />

                            <el-button v-if="state.isSend"
                                class="ml-10px w-115px input-btn">
                                <span class="fw-600"
                                    style="color:var(--el-color-primary);">{{ state.second }}s</span>
                                后重新获取
                            </el-button>

                            <el-button v-else
                                class="ml-10px w-115px input-btn"
                                @click="onSendCode">获取验证码</el-button>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary"
                            class="w-275px"
                            @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </section>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { aSuccess, aError, tLoading } from '@/utils/dialog'
import { useRouter } from 'vue-router'
import { authLogin, sendVerificationCode } from '@/api/user/user'
import { setUserInfo } from '~/utils/auth'
const {
    updateLogin
} = useLogin()
const router = useRouter()

const dm = ref({
    account: "",
    verificationCode: "",
    loginType: "verificationCode"
})
const state = reactive({
    loading: false,
    isSend: false,
    second: 0,
})

let timer = 0
const validatorAccount = () => {
    const { account: value } = dm.value
    if (!value) {
        aError('请输入手机号')
        return
    }
    const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
    if (!reg.test(value)) {
        aError('请填写正确的手机号，格式错误！')
        return
    }
    return true
}
const validatorCode = () => {
    const { verificationCode: value } = dm.value
    if (!value) {
        aError('请输入验证码')
        return
    }
    return true
}

const onSendCode = async () => {
    const { account } = dm.value
    if (!validatorAccount()) {
        return
    }
    if (state.loading) return
    state.loading = true
    const tl = tLoading('获取验证码中...')
    try {
        const { verification_code_expire } = await useGain(sendVerificationCode({
            account,
            mode: 'loginSmsCode'
        }))
        countdown(verification_code_expire)
        aSuccess('发送验证码成功，请注意查收！')
    } catch (error) {
        // console.log(error)
        aError(error.msg || '发送验证码失败，请重试！')
    } finally {
        state.loading = false
        tl.close()
    }
}

const countdown = (delay) => {
    state.isSend = true
    state.second = delay || 60
    timer = setInterval(() => {
        state.second--
        if (state.second <= 0) {
            state.isSend = false
            clearInterval(timer)
        }
    }, 1000)
}


const onSubmit = async () => {
    if (!validatorAccount()) {
        return
    }
    if (!validatorCode()) {
        return
    }
    if (state.loading) return
    state.loading = true
    const tl = tLoading('正在登录中...')
    try {
        const { data, success, msg } = await useGain(authLogin(dm.value))
        if (!success) throw { msg }
        const { token } = data
        await updateLogin(token)
        setUserInfo(data)
        router.replace('/')
    } catch (error) {
        // console.log(error)
        aError('登录失败，请重试！')
    } finally {
        state.loading = false
        tl.close()
    }
}
</script>
<style lang="scss">
.login-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .login-bg {
        width: 50%;
        height: 100%;
        background: #121ba4;
        background-image: url('/assets/img/login/bg.jpg');
        background-position: top right;
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

    .login-hd {
        display: flex;
        align-items: center;
        gap: 20px;

        .logo-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            font-size: 20px;
            font-weight: 600;
            text-indent: -9999px;
            overflow: hidden;
            margin-block-start: 30px;

            & img {
                width: 100%;
                height: auto;
                border-radius: 10px;
            }
        }

        .tlt {
            font-weight: 600;
            margin-block-start: 50px;
            margin-block-end: 0px;
            font-size: 25px;
        }

        .desc {
            margin-block-start: 15px;
            margin-block-end: 30px;
            font-size: 24px;
            font-weight: 400;
        }
    }

    .login-form {
        padding-inline-start: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        --el-border-color: #999;

        .el-button.input-btn {
            border: none;
            box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
        }

    }
}
</style>
